<template>
  <div>
    <el-card class="box-card baseInfo">
      <div slot="header" class="clearfix">
        <span>基础信息</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="back"
          >返回</el-button
        >
        <el-button
          style="float: right; padding: 3px 0; margin-right: 15px"
          type="text"
          @click="addCoupon"
          >保存</el-button
        >
      </div>
      <el-row type="flex" align="middle">
        <el-col :span="3"> 优惠券名称 </el-col>
        <el-col :span="5">
          <el-input
            placeholder="请输入内容"
            v-model="addParams.couponName"
            clearable
          >
          </el-input>
        </el-col>
      </el-row>
      <el-row type="flex" align="middle" style="margin-top: 15px">
        <el-col :span="3"> 优惠券门槛 </el-col>
        <el-col :span="2"> 订单满 </el-col>
        <el-col :span="3">
          <el-input
            placeholder="金额(元)"
            v-model="addParams.usageAmount"
            clearable
          >
          </el-input>
        </el-col>
        <el-col :span="2"> 可减 </el-col>
        <el-col :span="3">
          <el-input placeholder="金额(元)" v-model="addParams.value" clearable>
          </el-input>
        </el-col>
      </el-row>
      <el-row type="flex" align="middle" style="margin-top: 15px">
        <el-col :span="3"> 优惠券可领数量 </el-col>
        <el-col :span="8" :offset="1">
          <div class="block">
            <span class="demonstration"></span>
            <el-slider
              v-model="addParams.total"
              :max="500"
              show-input
            ></el-slider>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" align="middle" style="margin-top: 15px">
        <el-col :span="3"> 指定商品 </el-col>
        <el-col :span="3">
          <el-button type="text" @click="showSelectDialog">选择商品</el-button>
        </el-col>
      </el-row>
      <el-row type="flex" align="middle" style="margin-top: 15px">
        <el-col :span="3"> 有效期 </el-col>
        <el-col :span="1">
          <el-date-picker
            v-model="selectedTime"
            type="datetimerange"
            start-placeholder="创建日期"
            end-placeholder="创建日期"
            :default-time="['12:00:00']"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="handleSelTime"
          >
          </el-date-picker>
        </el-col>
      </el-row>
      <el-row type="flex" align="middle" style="margin-top: 15px">
        <el-col :span="3"> 优惠券描述 </el-col>
        <el-col :span="8">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
            v-model="addParams.condition"
          >
          </el-input>
        </el-col>
      </el-row>
    </el-card>

    <!-- 指定的商品 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="70%">
      <el-table
        :data="gridData"
        height="350"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          property=""
          label=""
          type="selection"
        ></el-table-column>
        <el-table-column property="id" label="商品编码"></el-table-column>
        <el-table-column property="name" label="商品名称"></el-table-column>
        <el-table-column property="price" label="单价"></el-table-column>
        <el-table-column property="productImg" label="图片">
          <template slot-scope="scope">
            <img :src="scope.row.productImg" style="width: 70px" />
          </template>
        </el-table-column>
        <el-table-column property="stock" label="库存"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created() {
    this.selectProduct();
  },
  data() {
    return {
      gridData: [],
      addParams: {
        couponName: "",
        usageAmount: "",
        value: "",
        total: null,
        productId: [],
        startTime: "",
        endTime: "",
        condition: "",
      },
      selectedTime: [],
      dialogVisible: false,
    };
  },
  methods: {
    back() {
      this.$router.push({ path: "/couponManagement" });
    },
    showSelectDialog() {
      this.dialogVisible = true;
    },
    addCoupon() {
      console.log(this.addParams.productId);
      if (this.addParams.productId.length == 0) {
        this.$message({
          showClose: true,
          message: "请将信息填写完全",
          type: "warning",
        });
        return;
      }
      //console.log(this.addParams);
      this.$axios
        .post("api/product-server/addCoupon", this.addParams)
        .then((response) => {
          if (response.data.code == 200) {
            this.selectedTime = [];
            this.addParams = {
              couponName: "",
              usageAmount: "",
              value: "",
              total: null,
              productId: [],
              startTime: "",
              endTime: "",
              condition: "",
            };
            this.$message({
              showClose: true,
              message: "添加成功",
              type: "success",
            });
          }
        });
    },
    handleSelectionChange(val) {
      //   console.log(val);
      let ids = [];
      for (let i = 0; i < val.length; i++) {
        ids.push(val[i].id + "");
      }
      this.addParams.productId = ids;
    },
    selectProduct() {
      //this.dialogVisible = true;
      this.$axios.get("api/product-server/queryGoods").then((response) => {
        if (response.data.code == 200) {
          this.gridData = response.data.data;
          //console.log(response.data);
        }
      });
    },
    handleSelTime() {
      this.addParams.startTime = this.selectedTime[0];
      this.addParams.endTime = this.selectedTime[1];
    },
  },
};
</script>

<style scoped>
.baseInfo {
  width: 1000px;
  margin: 0 auto;
}
</style>
